<template>
	<view class="container bg">
		<uv-status-bar></uv-status-bar>
		
		<view class="head mb-30 d-flex">
			<Avarar :size="160" />
			
			<view class="info ml-40 d-flex">
				<text class="name mb-20">{{ userInfo.username }}</text>
				
				<view class="tags">
					<text class="tag">个人用户</text>
				</view>
			</view>
		</view>
		
		<Msg class="mb-30" />
		
		<List class="mb-30" :list="page" />
		
		<List class="mb-50" :list="setting" />
		
		<navigator class="btn">投诉</navigator>
	</view>
</template>

<script setup>
	import { reactive } from 'vue'
	
	import Avarar from '@/components/Avatar/index.vue'
	import Msg from '@/pages/UserInfo/components/Msg.vue'
	import List from '@/pages/UserInfo/components/List.vue'
	
	const userInfo = reactive(uni.getStorageSync('userInfo'))
	
	const page = reactive([
		[
			{
				title: '我的报告',
				url: '/my/Report/index',
				icon: '',
				id: 1
			},
			{
				title: '邀请好友注册，获取报告收益',
				url: '/my/Share/index',
				icon: '',
				id: 2
			},
			{
				title: '商务合作',
				url: '/my/Cooperate/index',
				icon: '',
				id: 3
			}
		],
		[
			{
				title: '公告',
				url: '',
				icon: '',
				id: 4
			},
			{
				title: '签署协议',
				url: '',
				icon: '' ,
				id: 5
			}
		]
	])
	
	const setting = reactive([
		[
			{
				title: '账号设置',
				url: '',
				icon: '',
				id: 1
			},
			{
				title: '版本更新',
				describe: '当前版本V1.2',
				url: '',
				icon: '',
				id: 2
			}
		]
	])
</script>

<style scoped lang="scss">
.container {
	padding: 25rpx;
	height: auto;
	min-height: 100vh;
	
	.head {
		align-items: center;
		
		.info {
			flex-direction: column;
			.name {
				color: #333333;
				font: {
					weight: bold;
				}
			}
			
			.tags {
				flex-direction: row;
				flex-wrap: wrap;
				align-items: center;
				
				.tag {
					padding: 10rpx 15rpx;
					background-color: #6642EA;
					border-radius: 30rpx;
					color: #fff;
					font: {
						size: 22rpx;
					}
				}
			}
		}
	}
	
	.btn {
		margin: auto;
		width: 200rpx;
		height: 60rpx;
		text-align: center;
		line-height: 60rpx;
		border-radius: 60rpx;
		background-color: #FE6B66;
		box-shadow: 0 0 10rpx rgba(0, 0, 0, .3);
		color: #fff;
		font: {
			size: 24rpx;
		}
	}
}
</style>
